<template>
  <div>
    <v-edit :title="init?.isAdd ? '分类新增' : '分类编辑'" :init="comm" :infos="info" @reset="reset" @save="save" @close="close"
      :rules="rules">
      <template #formItem>
        <div class="two-col intro-y">
          <wde-tree-select label="上级分类" prop="parentKey" v-model="info.catParentCode" :options="categoryTree"
            :checkStrictly="true" />
        </div>
        <div class="two-col intro-y">
          <wde-input label="分类编码" prop="catCode" v-model="info.catCode" />
          <wde-switch label="有效" v-model="info.isEffective"/>
        </div>
        <div class="two-col intro-y">
          <wde-input label="分类序号" prop="catSeqNum" v-model="info.catSeqNum" />
        </div>
        <div class="one-col intro-y">
          <wde-input label="分类名称" prop="catName" v-model="info.catName" type="textarea" />
        </div>
        <div class="one-col intro-y">
          <wde-input label="分类说明" prop="catDesc" v-model="info.catDesc" type="textarea" />
        </div>
        <div class="one-col intro-y">
          <wde-input label="相关标准" prop="catStandards" v-model="info.catStandards" type="textarea" />
        </div>
        <div class="one-col intro-y">
          <wde-input label="示例说明" prop="extSample" v-model="info.extSample" type="textarea" />
        </div>
        <div class="one-col intro-y">
          <wde-input label="备注" prop="extRemark" v-model="info.extRemark" type="textarea" />
        </div>
      </template>
    </v-edit>
  </div>
</template>

<script setup>
import { ref, toRefs, watch, getCurrentInstance } from "vue";
import { useEditLogic } from "@/views/base/useEditLogic";
import * as $api from "@/api/api.js";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["close"]);

const props = defineProps({
  args: {
    type: Object,
    default: () => null,
  },
  init: {
    type: Object,
    default: () => null,
  },
});

const { init } = toRefs(props);
const info = ref({
  catCode: "",
  catSeqNum: 0,
  catName: "",
  catParentCode: "",
  catLevel: 0,
  isLowestLevel: true,
  isEffective: true,
  catDesc: "",
  catStandards: "",
  extSample: "",
  extRemark: "",
  children: []
});

const categoryTree = ref([]);
const rules = ref({
  catCode: [
    { required: true, message: "请输入分类编码", trigger: "blur" },
  ],
  catSeqNum: [
    { required: true, message: "请输入分类序号", trigger: "blur" },
  ],
  catName: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
  ],
});

const getCategoryTree = () => {
  $api.CategoryRefer({}).then((res) => {
    categoryTree.value = formatTreeData(res.children);
  });
};

const formatTreeData = (data) => {
  return data.map(item => ({
    value: item.catCode,
    label: item.catName,
    children: item.children ? formatTreeData(item.children) : null
  }));
};

const buildAdd = () => {
  return $api.CategoryAdd(info.value);
};

const buildUpdate = () => {
  return $api.CategoryUpdate(info.value);
};

const resetAdd = () => {
  proxy.$propsEmpty(info.value);
};

const resetUpdate = () => {
  proxy.$propsCopy(info.value, props.init);
};

const clearInfo = () => {
  proxy.$propsEmpty(info.value);
};

const close = () => {
  emit("close");
};

const { loading, comm, isView, reset, save, VEdit } = useEditLogic(
  init,
  info,
  resetAdd,
  resetUpdate,
  clearInfo,
  buildAdd,
  buildUpdate,
  close
);

watch(
  () => props.init,
  (newVal) => {
    if (newVal?.isAdd) {
      getCategoryTree();
    }
  }
);
</script>

<style></style>